<template>
  <div>
    <el-table
      :data="pointsList"
      style="width: 100%"
      height="100px"
      v-adaptive
      :key="tabKey"
      border
    >
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="token" label="Token"> </el-table-column>
      <!-- <el-table-column prop="description" label="说明"> </el-table-column> -->

      <el-table-column prop="type" label="数据类型"> </el-table-column>
      <el-table-column prop="permission" label="访问权限"> </el-table-column>
      <el-table-column prop="deviceEventType" label="事件类型">
        <template slot-scope="scope">
          {{ convert(scope.row.deviceEventType) }}
        </template>
      </el-table-column>
      <el-table-column prop="isChart" label="图表展示">
        <template slot-scope="scope">
          <div
            v-for="(item, index) in renderChartText(scope.row.isChart)"
            :key="index"
          >
            <el-tag size="mini">{{ item }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="unit" label="单位"> </el-table-column>
      <el-table-column label="操作" width="90">
        <template slot-scope="scope">
          <!-- 编辑点位 -->
          <el-button
            type="text"
            size="mini"
            icon="el-icon-edit-outline"
            @click="openAddPoints(scope.row, scope.$index)"
          ></el-button>
          <!-- 删除点位 -->
          <el-button
            v-permission="[12, 'button']"
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click="deleteRow(scope.row, scope.$index)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑点位弹窗 -->
    <edit-points
      @getPointsData="getPointsData"
      :editIndex="editIndex"
      :editPointsData="editPointsData"
      :addPointsshow="addPointsshow"
      @changeShow="showAddPoints"
      :deviceTypeToken="deviceTypeToken"
    />
  </div>
</template>

<script>
import EditPoints from "./EditPoints.vue";
import { deleteDeviceType } from "@/api/deviceType";

import { POINT_CHART_TYPES } from "@/utils/local";
import { generateId } from "@/utils";
export default {
  components: {
    EditPoints
  },
  props: {
    deviceTypeToken: {
      type: String,
      default: ""
    },
    pointsList: {
      type: Array,
      default: []
    }
  },
  computed: {
    renderChartText() {
      return function(type) {
        const types = type ? type.slice(",") : [];
        const options = POINT_CHART_TYPES.filter(item =>
          types.includes(item.key)
        );
        const labels = options.map(item => item.label);
        return labels;
      };
    }
  },
  data() {
    return {
      addPointsshow: false,
      editPointsData: {},
      editIndex: "",
      tabKey: ""
      // deviceTypeToken: this.$route.query.deviceTypeToken,
    };
  },
  mounted() {
    setTimeout(() => {
      this.tabKey = generateId();
    }, 500);
    //this.getPointsData();
  },
  methods: {
    //   获取点位列表
    getPointsData() {
      this.$emit("updatePointsList");
    },
    // 删除
    deleteRow(rows) {
      var that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const token = rows.token;
        deleteDeviceType(this.deviceTypeToken + "/attribute/" + token).then(
          res => {
            this.$msg({
              type: "success",
              message: "删除成功!"
            });
            that.getPointsData();
          }
        );
      });
    },
    // 编辑点位按钮
    openAddPoints(row, index) {
      this.editIndex = index;
      this.editPointsData = row;
      this.addPointsshow = true;
    },
    showAddPoints(data) {
      if (data === "false") {
        this.addPointsshow = false;
      } else {
        this.addPointsshow = true;
      }
    },
    convert(row) {
      if (row == "Measurement") {
        return "遥测";
      } else if (row == "Location") {
        return "位置";
      } else if (row == "Alert") {
        return "告警";
      } else if (row == "CommandInvocation") {
        return "命令调用";
      } else if (row == "CommandResponse") {
        return "命令响应";
      } else if (row == "StateChange") {
        return "设备状态";
      }
    }
  }
};
</script>

<style scoped></style>
